localStorage.setItem("eat", JSON.stringify(datas));
var students = localStorage.getItem("eat");
$(function () {
    students = JSON.parse(students);
    // 分页
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let xuhao = students.length;
    for (let i = 0; i < 5; i++) {//初始页面信息显示
        let student = $("<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].htNumber + "</td>" + "<td>" + students[i].businessName + "</td>" + "<td>"
            + students[i].businessType + "</td>" + "<td>" + students[i].inTentType + "</td>" + "<td>" + students[i].shenpi + "</td>" + "<td>" + students[i].names + "</td>" + "<td>" + students[i].StartTime + "</td>" + "<td>" + students[i].shenpili + "</td>" + "<td>" + students[i].EndTime + "</td>" + "<td> <button class=\"check\">查看</button> <button class=\"modify\">审批</button><button >删除</button>   </td>" + " </tr>");
        $("tbody").append(student);
    }
    $("tbody").trigger("create");         //trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）
    $("#pgn").text(page);
    $("#en").text(xuhao);
    $("#add").click(function () {
        //点击新增按钮触发的动作
        $("#asi").show();
        $('#asi').animate({
            top: '70px',
        }, 500)


    });

    shanchu();

    let objKeys = ["htNumber", "businessName", "businessType", "inTentType", "shenpi", "InvestmentPer", "StartTime", "shenpili", "EndTime", "caozuo"];
    $("#submit").click(function () {//提交按钮点击触发的动作
        let student = {};
        let isEmpty = false;
        $("#asi").find("input").each(function (index, domEle) {
            if (!domEle.value) {//如果添加时表单内有值为空，则不进行添加
                isEmpty = true;

            }
            student[objKeys[index]] = domEle.value;
        });
        if (!isEmpty) {
            students[xuhao] = student;
            xuhao++;

            $("#en").text(xuhao);


            let lpren = $("tbody tr").length - 1;//最后一页剩余的条目数;
            if (no + 5 > xuhao && lpren < 5) {//增加一个append函数，如果显示的是最后一页那么需要更新界面。
                $("tbody tr:last").after("<tr>" + "<td>" + (no + lpren + 1) + "</td>" + "<td>" + student.htNumber + "</td>" + "<td>" + student.businessName + "</td>" + "<td>" + student.businessType + "</td>" + "<td>" + student.inTentType + "</td>" + "<td>" + student.shenpi + "</td>" + "<td>" + student.names + "</td>" + "<td>" + student.StartTime + "</td>" + "<td>" + student.shenpili + "</td>" + "<td>" + student.EndTime + "<td>" + "<td> <button class=\"check\">查看</button> <button class=\"modify\">修改</button><button>删除</button>  </td>" + " </tr>");

            }
        }
        $("#asi").animate({
            top: "500px",
        },
            500);
        $("#asi").fadeOut(500);

    });




    $("tbody").on("click", ".check", function () {//点击查看按钮触发的动作
        $("#chesi").show();
        $('#chesi').animate({
            top: '70px',
        }, 500)

        let stuIndex = $(this).parent().parent().find("td")[0].innerText - 1;
        // let i = 0;
        $("#chesi").find("input").each(function (index, domEle) {
            domEle.value = students[stuIndex][objKeys[index]];//index->i
        });
    });

    let modifyNumber;

    $("tbody").on("click", ".modify", function () {//点击修改按钮触发的动作,解决了jQuery出现的新添加元素点击事件无效问题
        $("#chasi").show();
        $('#chasi').animate({
            top: '70px',
        }, 500)
        modifyNumber = $(this).parent().parent().find("td")[0].innerText - 1;
        let i = 0;
        $("#chasi").find("input").each(function (index, domEle) {
            domEle.value = students[modifyNumber][objKeys[i++]];
        });
    });


    $("#save").click(function () {//点击保存按钮触发的动作
        $("#chasi").find("input").each(function (index, domEle) {
            if (domEle.value)
                students[modifyNumber][objKeys[index]] = domEle.value;
        });
        $("tbody tr").eq(modifyNumber - no + 1).remove();
        $("tbody tr").eq(modifyNumber - no).after("<tr>" + "<td>" + students[modifyNumber].xuhao + "</td>" + "<td>" + students[modifyNumber].htNumber + "</td>" + "<td>" + students[modifyNumber].businessName + "</td>" + "<td>"
            + students[modifyNumber].businessType + "</td>" + "<td>" + students[modifyNumber].inTentType + "</td>" + "<td>" + students[modifyNumber].shenpi + "</td>" + "<td>" + students[modifyNumber].names + "</td>" + "<td>" + students[modifyNumber].StartTime + "</td>" + "<td>" + students[modifyNumber].shenpili + "</td>" + "<td>" + students[modifyNumber].EndTime + "</td>" + "<td> <button class=\"check\">查看</button> <button class=\"modify\">修改</button><button>删除</button></td>" + " </tr>");
        $("#chasi").animate({
            top: "500px",
        },
            500);
        $("#chasi").fadeOut(500);
        shanchu();
    });


    $(".cancel").click(function () {//多个取消按钮点击触发的动作

        $(".achaesi").animate({
            top: "500px",
        },
            500);
        $(".achaesi").fadeOut(500);

    });

    $("tbody tr td:first").click(function () {//全选操作用到了JQuery的隐示迭代
        $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));
    });

    $("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {
        let isSelectAll = true;
        $("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {
            if ($(domEle).prop("checked") == false)
                isSelectAll = false;
        });
        $("tbody tr:first td:first input").prop("checked", isSelectAll);
    })


    // 添加
    let update = (no) => {
        let i = 0;//用于增加信息条目的变量;
        $("tbody tr:first").siblings().remove();//清空界面
        while (i < 5 && no + i < xuhao) {
            let student = $("<tr>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].htNumber + "</td>" + "<td>" + students[no + i].businessName + "</td>" + "<td>"
                + students[no + i].businessType + "</td>" + "<td>" + students[no + i].inTentType + "</td>" + "<td>" + students[no + i].shenpi + "</td>" + "<td>" + students[no + i].names + "</td>" + "<td>" + students[no + i].StartTime + "</td>" + "<td>" + students[no + i].shenpili + "</td>" + "<td>" + students[no + i].EndTime + "</td>" + "<td> <button class=\"check\">查看</button> <button class=\"modify\">修改</button><button>删除</button></td>" + " </tr>");
            $("tbody").append(student);
            i++;
        }
        $("tbody").trigger("create");
        shanchu();
    }



    // //删除
    // $("#delete").click(function () {
    //     if (layer.alert("确认要删除这些信息吗？")) {
    //         let delNumber = 0;//删除的信息条目数;
    //         let delIndexs = []; //删除信息条目的下标;用于后期处理避免“落空”导致移动无效
    //         // let i = 0;//用于增加信息条目的变量;
    //         $("tbody tr td input").each(function (index, domEle) {
    //             if (index != 0 && $(domEle).prop("checked")) {//index != 0,防止标题行被删除
    //                 delIndexs[delIndexs.length] = $(domEle).parent().next().text() - 1;
    //                 $(domEle).parent().parent().remove();
    //                 delNumber++;
    //             }
    //         });

    //         for (let j = delIndexs.length - 1; j >= 0; j--) {
    //             for (let k = delIndexs[j]; k < xuaho - 1; k++) {//低效的代码，需要大量移动对象索引;对JS不太熟悉，还没有想到高效的解决办法!
    //                 students[k] = students[k + 1];
    //             }
    //         }

    //         xuhao -= delNumber;//指向储存底层数据(学生对象)的数组尾部的指针“移动”
    //         $("#en").text(xuhao);//更新条目数
    //         if (xuhao == no) {
    //             no -= 5;
    //             page--;
    //             $("#pgn").text(page);
    //         }
    //         update(no);

    //         $("tbody tr td:first input").prop("checked", false);
    //     }
    // });
    $("#cz").click(function () {
        update(no);
    });



    // 下一页
    $("#nextpage").click(function () {
        if (no + 5 < xuhao) {
            no += 5;
            page++;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);

        } else {
            layer.alert("已经是最后一页了")
        }
    });


    // 上一页
    $("#lastpage").click(function () {
        if (no - 5 >= 0) {
            no -= 5;
            page--;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);

        } else {
            layer.alert("已经是第一页了")
        }

    });

})








$(function () {
    $("table button").mouseover(function () {
        $(this).css("opacity", "calc(0.8)");
    })
    $("table button").mouseout(function () {
        $(this).css("opacity", "calc(1)");
    })
})



//删除
function shanchu() {
    $("table tbody tr  button:nth-child(3) ").click(function () {
        $(this).parent().parent().remove();
    })

}





//查询

$("#btn1").click(function () {

    // $('#chaxun').innerHTML = '';
    $("tbody tr:first").siblings().remove();//清空界面
    let result = students.filter(function (item) { return item.htNumber == htbh.value });

    if (result.length >= 1) {
        (result).forEach(function (value) {
            chaxun.innerHTML += `<tr>     
                                        <td>${value.xuhao}</td>   
                                           <td>${value.htNumber}</td>
                                            <td>${value.businessName}</td>
                                            <td>${value.businessType}</td>
                                            <td>${value.inTentType}</td>
                                            <td>${value.shenpi}</td>
                                            <td>${value.InvestmentPer}</td>
                                            <td>${value.StartTime}</td>
                                            <td>${value.names}</td>
                                            <td>${value.EndTime}</td>
                                            <td>${value.caozuo}</td>
                                      </tr>`
        });
        shanchu();
        $("table tbody tr  button:nth-child(1) ").addClass("check")
        $("table tbody tr  button:nth-child(2) ").addClass("modify")
    }
    if (result.length < 1) (

        layer.alert("请你的信息")

    )
    htbh.value = "";


});
